<template>
  <div class="Major">
    <div class="major-wrapper">
      <div class="header">
        <div class="header-college">
          <div class="overview"><span>{{ reportNum }}</span>人<strong style="padding: 0 10px;">/</strong><span>{{ total }}</span>人</div>
          <h1>{{ major }}</h1>
        </div>
      </div>
       <div>
        <a-tabs default-active-key="2" size="default">
          <a-tab-pane key="1" tab="全部">
            <major-stu-info
              v-for="(stu,index) in studentList"
              :key="index"
              :student="stu"
            />
          </a-tab-pane>
          <a-tab-pane key="2" tab="已报道">
            <major-stu-info
              v-for="(stu,index) in studentList.filter(e => e.isdao)"
              :key="index"
              :student="stu"
            />
          </a-tab-pane>
          <a-tab-pane key="3" tab="未报道">
            <major-stu-info
              v-for="(stu,index) in studentList.filter(e => !e.isdao)"
              :key="index"
              :student="stu"
            />
          </a-tab-pane>
        </a-tabs>
       </div>
    </div>
  </div>
</template>

<script>
import api from '../api/index.js'
import MajorStuInfo from '../components/majorStuInfo'

export default {
  name: 'Major',
  components: {
    MajorStuInfo
  },
  data () {
    return {
      studentList: [],
      total: 0,
      reportNum: 0
    }
  },
  created () {
    console.log(this.college, this.major)
    const params = {
      college: this.college,
      major: this.major
    }
    api.report.findStudentByMajor(params).then(res => {
      if (res.code === 0) {
        this.total = res.data.total
        this.reportNum = res.data.reportNum
        this.studentList = res.data.records
      }
    })
  },
  computed: {
    major () {
      return this.$store.state.major
    },
    college () {
      return this.$store.state.userInfo.yb_collegename
    }
  }
}
</script>

<style scoped>
  .Major {
    width: 100%;
    background: #fff;
    min-height: 100%;
  }

  .major-wrapper {
    width: 100%;
    padding: 20px 15px;
  }

  .header {
    width: 100%;
  }

  .header-college {
    width: 100%;
    height: 132px;
    display: flex;
    flex-direction: column;
    padding: 30px 15px;
    justify-content: space-between;
    background-image: url('../assets/images/major.png');
    background-size: 100%;
    background-repeat: no-repeat;
    border-radius: 25px;
    box-shadow: 0px 0px 6px 0px rgba(0,0,0,.2);
    color: #fff;
    margin-bottom: 20px;
  }

  .overview span {
    font-size: 1.3em;
    font-weight: bold;
  }

  .header-college h1 {
    font-size: 20px;
    color: #fff;
    font-weight: bold;
    margin: 0;
    text-shadow: 0px 0px 8px rgb(0 0 0 / 20%);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  ::v-deep .ant-tabs-nav .ant-tabs-tab {
    flex: 1;
    text-align: center;
    margin-right: 0px;
  }

  ::v-deep .ant-tabs-nav-scroll {
    width: 100%;
  }

  ::v-deep .ant-tabs-nav {
    width: 100%;
  }

  ::v-deep .ant-tabs-nav > div {
    display: flex;
  }

</style>
